<template>
  <!-- 支付结果弹窗 -->
  <van-dialog
    v-model:show="internalShow"
    :title="title"
    confirm-button-text="确定"
    cancel-button-text="取消"
    :show-cancel-button="true"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <div class="dialog-content">
      <p>{{ content }}</p>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
});
// update:show
// 这个是 Vue 里的 v-model 语法糖 用到的事件，通常配合组件的双向绑定使用。
const emit = defineEmits(["update:show", "confirm", "cancel"]);

const internalShow = ref(props.show);

// 监听外部的show变化
watch(
  () => props.show,
  (val) => {
    internalShow.value = val;
  }
);

// 监听内部show变化
watch(internalShow, (val) => {
  emit("update:show", val);
});

const handleConfirm = () => {
  emit("confirm");
  internalShow.value = false;
};

const handleCancel = () => {
  emit("cancel");
  internalShow.value = false;
};
</script>

<style scoped lang="less">
.dialog-content {
  padding: 20px;
  text-align: center;

  .highlight {
    color: #003366;
    font-weight: bold;
  }
}
</style>
